<template>
  <el-card style="margin-top: 10px">
    <div class="assignment-list">
      <h1>今日作业</h1>
      <el-table :data="assignments" style="width: 100%">
        <el-table-column prop="title" label="科目" width="180"></el-table-column>
        <el-table-column prop="description" label="作业内容"></el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'

const assignments = ref([])

const fetchAssignments = async () => {
  try {
    const response = await axios.get('/api/assignment/getAllAssignment')
    assignments.value = response.data.data
  } catch (error) {
    console.error('获取作业列表失败:', error)
  }
}

onMounted(() => {
  fetchAssignments()
})
</script>

<style scoped lang="scss">
.assignment-list {
  text-align: center;
  background-color: #ffffff;
  border-radius: 12px;

  h1 {
    font-size: 32px;
    color: #444;
    margin-bottom: 25px;
    font-weight: 600;
  }
}
</style>
